<template>
  <div class="collapse-container mini-scroll-bar" v-bind="$attrs">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.collapse-container {
  opacity: 0;
  width: 100%;
  max-height: 0;
  color: var(--text-color);
  background-color: var(--layout-bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0 16px;
  transition:
    all 0.3s,
    opacity 0.2s;
  overflow: hidden auto;

  &[collapse='true'] {
    opacity: 1;
    max-height: 20vh;
    margin: 16px 0 8px 0;
    padding: 16px;
  }
}
</style>
